
<template>
    <basic-container class="noScrollBar tabMain-wrap">
        <avue-crud :option="detailOptions.options" :table-loading="loading" :data="data" :page.sync="page" ref="crud"
            v-model="form" :permission="permissionList" @row-save="rowSave" @row-update="rowUpdate"
            @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
            @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange"
            :upload-after="uploadAfter" @on-load="onLoad">
            <template slot-scope="{ row }" slot="menuLeft">
                <el-button type="danger" icon="el-icon-plus" size="small" @click="rowSaveForm(row)">新增</el-button>
                <el-button @click="delselection" type="primary" size="small">批量删除</el-button>
            </template>
            <!-- 注意 父子表时，子表的prop+"Form"=slot才行 -->
            <avue-crud v-show="infoData.length != 0" slot="infoForm" :option="infoOption" v-model="infoForm"
                :data="infoData">
                <template slot-scope="{ row }" slot="menu">
                    <el-button @click="print(row)" type="text" size="small" icon="el-icon-download">下载附件</el-button>

                    <el-button @click="infoRowDel(row)" v-show="userInfo.user_id == row.createUser && !isView"
                        type="text" size="small" icon="el-icon-remove">删除附件</el-button>
                </template>
            </avue-crud>

            <template slot-scope="{ row }" slot="menu">
                <el-button @click="rowViewForm(row)" type="text" size="small" icon="el-icon-view">查看</el-button>
                <el-button @click="rowDel(row)" v-show="userInfo.user_id == row.createUser" type="text" size="small"
                    icon="el-icon-remove">删除</el-button>
                <el-button @click="rowEditForm(row)" v-show="userInfo.user_id == row.createUser" type="text"
                    size="small" icon="el-icon-edit">编辑</el-button>
            </template>
        </avue-crud>
        <el-drawer :visible.sync="showAddMenuDrawer" :direction="'ltr'" :title="caseTit" :size="'75%'" :center="false"
            :modal="false" :destroy-on-close="true">
        </el-drawer>
    </basic-container>
</template>
<script>
import { mapGetters } from "vuex";
// import { getToken } from '@/util/auth';
import { getZskList, zskSave, zskUpdate, zskRemove } from "@/api/sxdky/sxdky";
import { mapState, mapMutations } from "vuex";
import { getLabelValue, splitLabelValue } from "@/util/labelValue";
export default {
    data() {
        return {
            form: {},
            infoForm: {},
            query: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            selectionList: [],
            data: [],
            infoData: [],
            isView: false,
            detailOptions: {
                label: "文件管理",
                name: "fileList",
                options: {
                    label: "知识库管理",
                    name: "manage",
                    height: "calc(100vh - 425px)",
                    index: true,
                    indexLabel: "序号",
                    indexFixed: false,
                    menuDelBtn: false,
                    menuUpBtn: false,
                    menuDownBtn: true,
                    dialogDirection: "ltr",
                    dialogType: "drawer",
                    calcHeight: 30,
                    excelBtn: true,
                    tip: false,
                    searchShow: true,
                    searchMenuSpan: 6,
                    border: true,
                    menuForm: false,
                    selection: true,
                    dialogClickModal: false,
                    menuOtherBtn: true,
                    gistBtn: false,
                    align: "center",
                    menuAlign: "center",
                    searchIcon: true,
                    searchIndex: 3,
                    labelWidth: 120,
                    addBtn: false,
                    viewBtn: false,
                    editBtn: false,
                    delBtn: false,
                    column: [
                        {
                            label: "资料名称",
                            prop: "informationName",
                            search: true,
                            display: true,
                            overHidden: true,
                            rules: [
                                {
                                    required: true,
                                    message: "请输入资料名称",
                                    trigger: "blur",
                                },
                            ],
                        },
                        {
                            label: "资料类别",
                            prop: "informationTypeKey",
                            type: "select",
                            search: false,
                            display: true,
                            overHidden: true,
                            dicData: [
                                {
                                    label: "论文",
                                    value: "0",
                                },
                                {
                                    label: "软著",
                                    value: "1",
                                },
                                {
                                    label: "专利",
                                    value: "2",
                                },
                                {
                                    label: "技术报告",
                                    value: "3",
                                },
                                {
                                    label: "作业指导书",
                                    value: "4",
                                },
                                {
                                    label: "标准模板",
                                    value: "5",
                                },
                                {
                                    label: "大纲方案",
                                    value: "6",
                                },
                                {
                                    label: "计划资料",
                                    value: "7",
                                },
                                {
                                    label: "分析报告",
                                    value: "8",
                                },
                                {
                                    label: "总结报告",
                                    value: "9",
                                },
                                {
                                    label: "检测报告",
                                    value: "10",
                                },
                                {
                                    label: "其它",
                                    value: "11",
                                },
                            ],
                            rules: [
                                {
                                    required: true,
                                    message: "请选择资料类别",
                                    trigger: "blur",
                                },
                            ],
                        },
                        {
                            label: "项目编号",
                            prop: "projectNum",
                            search: false,
                            display: true,
                            rules: [
                                {
                                    required: true,
                                    message: "请输入项目编号",
                                    trigger: "blur",
                                },
                            ],
                        },
                        {
                            label: "项目名称",
                            prop: "projectName",
                            search: false,
                            overHidden: true,
                            display: true,
                            rules: [
                                {
                                    required: true,
                                    message: "请输入项目名称",
                                    trigger: "blur",
                                },
                            ],
                        },
                        {
                            label: "等级",
                            prop: "informationLevelKey",
                            type: "select",
                            search: false,
                            display: true,
                            dicData: [
                                {
                                    label: "国家级",
                                    value: "gj",
                                },
                                {
                                    label: "省级",
                                    value: "sj",
                                },
                                {
                                    label: "部级",
                                    value: "bj",
                                },
                                {
                                    label: "校级",
                                    value: "xj",
                                },
                            ],
                            rules: [
                                {
                                    required: true,
                                    message: "等级",
                                    trigger: "blur",
                                },
                            ],
                        },
                        {
                            label: "提交时间",
                            prop: "createTime",
                            type: "dateTime",
                            search: false,
                            display: false,
                            overHidden: true,
                            sortable: true,
                        },
                        //创建时间搜索
                        {
                            label: "提交人",
                            prop: "submitAccount",
                            // search: true,
                            addDisplay: false,
                            editDisplay: false,
                            viewDisplay: true,
                            overHidden: true,
                        },
                        {
                            label: "部(室)",
                            prop: "departmentName",
                            search: false,
                            display: true,
                            overHidden: true,
                            type: "tree",
                            dicUrl: "/api/dis-sys/dept/tree",
                            dicMethod: "get",
                            dicQuery: {
                                tenantId: "000000"
                            },
                            props: {
                                label: "title",
                                value: "id",
                            },
                            rules: [{
                                required: true,
                                message: "请选择所属部门",
                                trigger: "click"
                            }],
                            dicFormatter: (data) => {
                                return data.data
                            },
                        },
                        {
                            label: "资料作者",
                            prop: "author",
                            search: true,
                            addDisplay: true,
                            editDisplay: true,
                            viewDisplay: true,
                            overHidden: true,
                            // row: true,
                        },
                        {
                            label: "发表时间",
                            prop: "publishTime",
                            type: "date",
                            search: true,
                            display: true,
                            overHidden: true,
                            sortable: true,
                        },
                        {
                            label: "资料上传",
                            type: "upload",
                            prop: "file",
                            addDisplay: true,
                            editDisplay: true,
                            viewDisplay: false,
                            showFileList: false,
                            overHidden: true,
                            span: 24,
                            loadText: "模板上传中，请稍等",
                            slot: true,
                            hide: true,
                            accept: ".docx,.doc,.zip",
                            tip: "请上传.docx,.doc,.zip格式",
                            action: "/api/dis-report/fastdfs/upload",
                            //1、附件通过action中的路径上传后，会将自动将响应结果中 data.url放入res中，将data.name放入name中。
                            //2、文件上传之后将保存在this.form.file: [{label: "",value: ""},{}]中
                            // 可以通过this.form.file[0].label来获取第一个文件的name，通过this.form.file[0].value来获取url
                            propsHttp: {
                                res: "data",
                                url: "url",
                                name: "name",
                            },
                        },
                        {
                            labelWidth: 0,
                            label: "",
                            prop: "info",
                            span: 24,
                            hide: true,
                            formslot: true,
                        },
                    ],
                    group: [
                        {
                            label: '',
                            column: [
                                {
                                    label: "创建时间",
                                    type: 'datetimerange',
                                    prop: 'searchTime',
                                    searchLabelWidth: 80,
                                    search: true,
                                    display: false,
                                    viewDisplay: false,
                                    searchRange: true,//搜索栏使用范围性搜索
                                    defaultTime: ['00:00:00', '00:00:00'], //默认每天是0点
                                    format: 'yyyy-MM-dd HH:mm:ss',
                                    valueFormat: 'yyyy-MM-dd HH:mm:ss',
                                    // valueFormat: 'timestamp',
                                    startPlaceholder: '开始时间',
                                    endPlaceholder: '结束时间',
                                },
                            ]
                        }
                    ]
                },
                url: {
                    getList: getZskList,
                    remove: zskRemove,
                    update: zskUpdate,
                    add: zskSave,
                },
            },
            infoOption: {
                // showHeader: false,
                header: false,
                addBtn: false,
                editBtn: false,
                delBtn: false,
                refreshBtn: false,
                columnBtn: false,
                column: [
                    {
                        label: "附件名",
                        prop: "label",
                    },
                    // {
                    //   label: '附件url',
                    //   prop: 'value'
                    // },
                    // {
                    //   label: '创建人',
                    //   prop: 'createUser'
                    // }
                ],
            },
        };
    },
    components: {},
    computed: {
        ...mapState(["formData"]),
        ...mapGetters(["permission", "userInfo", "formData"]),
        permissionList() {
            return {
                addBtn: this.vaildData(this.permission.dnzl_add, false),
                viewBtn: this.vaildData(this.permission.dnzl_add, false),
                delBtn: this.vaildData(this.permission.dnzl_add, false),
                editBtn: this.vaildData(this.permission.dnzl_add, false),
            };
        },
        ids() {
            let ids = [];
            this.selectionList.forEach((ele) => {
                ids.push(ele.id);
            });
            return ids.join(",");
        },
    },
    mounted() { },
    // 解决AVue表格错位问题
    activated() {
        this.$nextTick(() => {
            this.$refs.crud.doLayout();
        });
    },
    methods: {
        ...mapMutations(["assignFormData"]),
        // 点击自定义新增按钮时触发，
        rowSaveForm(row) {
            this.isView = false;
            this.infoData = []; //清空上传列表
            this.$refs.crud.rowAdd(row);
        },
        // 点击自定义父表单编辑按钮时触发
        rowEditForm(row) {
            this.isView = false;
            this.infoData = splitLabelValue(row.nameUrl, row.createUser); //用数据库读取到的新数据来更新暂存区
            this.$refs.crud.rowEdit(row);
        },
        // 点击自定义父表单查看按钮触发
        rowViewForm(row) {
            this.isView = true;
            this.infoData = splitLabelValue(row.nameUrl, row.createUser); //用数据库读取到的新数据来更新暂存区
            this.$refs.crud.rowView(row); //打开查看窗口
        },
        // 点击自定义父表单删除按钮触发
        rowDel(row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return this.detailOptions.url.remove(row.id);
                })
                .then(() => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    });
                    this.$refs.crud.toggleSelection();
                });
        },
        // 点击新增-保存按钮时触发
        rowSave(row, done, loading) {
            row.payProof = this.payProof;
            row.nameUrl = getLabelValue(this.form.file); //把暂存区中数据组装，然后保存到后端
            this.detailOptions.url.add(row).then(
                () => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    });
                    done(); //done:成功打开则继续下一步，
                },
                (error) => {
                    window.console.log(error);
                    loading(); // loading:错误则加载状态
                }
            );
        },
        // 点击编辑-修改按钮时触发
        rowUpdate(row, index, done, loading) {
            row.nameUrl = getLabelValue(this.infoData); //把暂存区中数据组装，然后保存到后端
            this.detailOptions.url.update(row).then(
                () => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    });
                    done();
                },
                (error) => {
                    window.console.log(error);
                    loading();
                }
            );
        },
        // 点击自定义子表单删除按钮触发
        infoRowDel(row) {
            this.infoData = this.infoData.filter((item) => {
                //修改暂存区
                if (item.label != row.label) {
                    return item;
                }
            });
        },
        //批量删除
        async delselection() {
            if (this.ids.length != 0) {
                await this.$confirm("是否确认删除选中的数据？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    zskRemove(this.ids);
                    getZskList().then((result) => {
                        this.data = result.data.data.records
                    })
                }).then(() => {
                    this.$message.success("删除成功");
                    this.getList(this.page);
                    this.$refs.crud.toggleSelection();
                });
            } else {
                this.$message.error("未选中数据");
            }
        },
        // 上传回调
        uploadAfter(res, done) {
            this.infoData.push({
                label: res.name,
                value: res.url,
                createUser: res.createUser,
            }); //每次上传都把数据保存到暂存区,每次打开窗口都得先清空暂存区，因此不推荐新增时使用，可以编辑和查看时使用。
            done();
        },
        // 打印下载
        print(row) {
            window.open(row.value);
            // window.open(this.fileDownload + `?fileName=${row.label}&filePath=${row.value}&${this.website.tokenHeader}=${getToken()}`)
        },

        searchReset() {
            this.query = {};
            this.onLoad(this.page);
        },
        searchChange(params, done) {
            //实现时间范围查找
            if (params.searchTime != undefined) {
                params.searchTimeBegin = params.searchTime[0]
                params.searchTimeEnd = params.searchTime[1]
                delete params.searchTime
            } else {
                params.searchTimeBegin = ''
                params.searchTimeEnd = ''
            }
            this.query = params;
            this.page.currentPage = 1;
            this.onLoad(this.page, params);
            done();
        },
        selectionChange(list) {
            this.selectionList = list;
        },
        selectionClear() {
            this.selectionList = [];
            this.$refs.crud.toggleSelection();
        },
        currentChange(currentPage) {
            this.page.currentPage = currentPage;
        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
        },
        refreshChange() {
            this.onLoad(this.page, this.query);
        },
        onLoad(page, params = {}) {
            let values = {
                ...params,
            };
            this.loading = true;
            this.detailOptions.url
                .getList(page.currentPage, page.pageSize, values)
                .then((res) => {
                    const data = res.data.data;
                    this.page.total = data.total;
                    this.data = data.records;
                    this.loading = false;
                    this.selectionClear();
                });
        },
        cancelSign() {
            console.log(this.selectionList);
        },
    },
};
</script>
<style lang='scss'>






.tabMain-wrap {
    // height: calc(100vh - 400px);
    overflow: hidden auto;
}
.fileConList {
    p {
        margin: 0;
    }
    .scrollDiv {
        height: calc(100% - 90px);
        overflow: auto;
    }
}
</style>
